<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试管理</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 1200px; margin: auto; background-color: #f4f4f9; }
        h1, h2, h3 { color: #333; }
        select, input[type="text"], input[type="file"] { width: calc(100% - 22px); padding: 8px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 8px 16px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; margin-right: 10px; }
        button:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; position: relative; }
        th { background-color: #f4f4f4; cursor: pointer; user-select: none; }
        .card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; width: 250px; display: inline-block; margin: 10px; vertical-align: top; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        .page-break { page-break-after: always; }
        nav a { margin-right: 10px; color: #007bff; text-decoration: none; }
        nav a:hover { text-decoration: underline; }
        .error-message { color: red; margin-top: 10px; }
        .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
    </style>
</head>
<body>
    <nav>
        <a href="/">首页</a>
        <a href="/students">学生管理</a>
        <a href="/exams">考试管理</a>
        <a href="/scores">成绩管理</a>
        <a href="/analysis">成绩分析</a>
    </nav>

    <h1>考试管理</h1>

    <!-- 创建考试表单 -->
    <form id="createExamForm">
        <label for="examName">考试名称:</label>
        <input type="text" id="examName" required>
        <br>
		<label for="examTime">考试时间:</label>
        <input type="text" id="examTime" required>
        <button type="submit">创建考试</button>
    </form>

    <form id="examForm">
        <label for="examSelect">选择考试:</label>
        <select id="examSelect" required>
            <option value="">请选择考试</option>
            {% for exam in exams %}
            <option value="{{ exam.id }}">{{ exam.name }}</option>
            {% endfor %}
        </select>
        <button type="submit">加载成绩</button>
        <button onclick="triggerFileUpload()">批量导入成绩</button>
        <input type="file" id="scoresFile" accept=".xlsx,.xls" style="display:none;" onchange="handleFileUpload()">
    </form>
    <div id="errorMessage" class="error-message"></div>

    <table id="scoresTable" style="display: none;">
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>科目</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <!-- 成绩行将动态插入到这里 -->
        </tbody>
    </table>

    <script>
        document.getElementById('createExamForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const examName = document.getElementById('examName').value;
            const examTime = document.getElementById('examTime').value;

            if (!examName || !examTime) {
                showError("请输入考试名称和考试时间");
                return;
            }

            fetch('/add_exam', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name: examName, time: examTime })
            })
            .then(response => response.json())
            .then(data => {
                // 重新加载考试选项
                const examSelect = document.getElementById('examSelect');
                const newOption = document.createElement('option');
                newOption.value = data.id;
                newOption.textContent = data.name;
                examSelect.appendChild(newOption);
                hideError();
            })
            .catch(error => {
                showError(error.message);
            });
        });

        document.getElementById('examForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const examId = document.getElementById('examSelect').value;

            if (!examId) {
                showError("请选择一个考试");
                return;
            }

            fetch(`/get_scores/${examId}`)
            .then(response => response.json())
            .then(scoresData => {
                updateScoresTable(scoresData);
                hideError();
            })
            .catch(error => {
                showError(error.message);
            });
        });

        function showError(message) {
            const errorMessageDiv = document.getElementById('errorMessage');
            errorMessageDiv.textContent = message;
        }

        function hideError() {
            const errorMessageDiv = document.getElementById('errorMessage');
            errorMessageDiv.textContent = '';
        }

        function triggerFileUpload() {
            document.getElementById('scoresFile').click();
        }

        function handleFileUpload() {
            const fileInput = document.getElementById('scoresFile');
            const file = fileInput.files[0];
            const examId = document.getElementById('examSelect').value;

            if (!file || !examId) {
                showError("请选择文件和考试");
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('examId', examId);

            fetch('/upload_scores', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                hideError();
                alert("成绩导入成功");
            })
            .catch(error => {
                showError(error.message);
            });
        }

        function updateScoresTable(scoresData) {
            const scoresTable = document.getElementById('scoresTable');
            const tbody = scoresTable.querySelector('tbody');
            tbody.innerHTML = '';

            scoresData.forEach(score => {
                const row = document.createElement('tr');
                const studentNameCell = document.createElement('td');
                studentNameCell.textContent = score.studentName;
                const subjectCell = document.createElement('td');
                subjectCell.textContent = score.subject;
                const scoreCell = document.createElement('td');
                scoreCell.textContent = score.score;

                row.appendChild(studentNameCell);
                row.appendChild(subjectCell);
                row.appendChild(scoreCell);

                tbody.appendChild(row);
            });

            scoresTable.style.display = 'table';
        }
    </script>
</body>
</html>